<template>
  <div class="app-container">
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters" size="small">
        <el-form-item label="选择月份">
          <el-date-picker v-model="filters.month" type="month" placeholder="选择月份"/>
        </el-form-item>
        <el-form-item label="老师姓名">
          <el-input v-model="filters.name" :clearable="true" placeholder="老师姓名"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="toQuery">查询</el-button>
          <!-- <el-button type="success" icon="el-icon-download" @click="exportSchedule">导出课表</el-button> -->
        </el-form-item>
      </el-form>
    </el-col>

    <!--老师列表,本月课程进度-->
    <el-table v-loading="listLoading" :data="data" highlight-current-row @selection-change="selsChange">
      <el-table-column type="index" label="序号" width="55"/>
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row)">{{ scope.row.name }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="本月课时"/>
      <el-table-column prop="one" label="一对一课时"/>
      <el-table-column prop="group" label="小组课时"/>
      <el-table-column prop="spend" label="已上课时"/>
      <el-table-column prop="nextCourse" label="最近课程"/>
      <el-table-column label="下次课时间">
        <template slot-scope="scope">
          {{ scope.row.nextTime | formatDate('yyyy-MM-dd') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)">查看</el-button>
          <em class="block-col"/>
          <el-button type="text" :loading="downloadLoading" @click="handleDownload(scope.row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>

    <!--老师课表详情页-->
    <el-dialog :visible.sync="viewFormVisiable" :close-on-click-modal="false" title="老师课表">
      <schedule-calendar
        v-if = "schedules.length>0"
        :events = "schedules"
        :dateItemRender = "itemRender"
        style="height: 1000px"
        @event-dragend = "changeDate"/>
    </el-dialog>
    <!-- 修改课表 -->
    <change-schedule ref="changeScheduleDlg" :scheduleId="scheduleId" @scheduleChanged="scheduleChanged"/>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { getTeacherSchedules, changeScheduleReq } from '@/api/schedule'
import scheduleCalendar from '@/components/schedule-calendar/index'
import { parseDate } from '@/utils/index'
import changeSchedule from '@/components/schedule/change-schedule'

export default {
  components: { scheduleCalendar, changeSchedule },
  mixins: [initData],
  data() {
    return {
      filters: {
        name: '',
        month: ''
      },
      data: [],
      sels: [],
      months: [],
      viewFormVisiable: false,
      schedules: [],
      teacherId: 0,
      scheduleId: null,
      listLoading: false,
      downloadLoading: false
    }
  },
  computed: {},
  // 9.Events ( watch/Lifecycle Events )
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
    // this.getMerchantSchedules()
  },
  // 10.Non-Reactive Properties ( methods )
  methods: {
    beforeInit() {
      this.url = 'schedule/list'
      const sort = 'id,asc'
      this.params = {
        name: this.filters.name,
        month: this.filters.month,
        page: this.page,
        size: this.size,
        sort: sort
      }
      return true
    },
    toQuery() {
      this.page = 1
      this.init()
    },
    handleDetail: function(row) {
      this.$router.push({
        path: `/education/schedule/teacher/${row.teacherId}`
      })
    },
    handleView: function(row) {
      this.teacherId = row.teacherId
      const para = {
        teacherId: this.teacherId
      }
      getTeacherSchedules(para).then(res => {
        this.schedules = res.data.list
        console.log(this.schedules)
      })
      this.viewFormVisiable = true
    },
    handleDownload: function(row) {
      console.log('---> 开始下载老师 ' + row.name + ' 课表')
      this.downloadLoading = true
      // 查询当月的课表
      this.teacherId = row.teacherId
      const para = {
        teacherId: this.teacherId
      }
      getTeacherSchedules(para).then(res => {
        if (res.code == 0) {
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['ID', '班级名称', '课程名称', '课次', '上课日期', '上课时间', '状态']
            const filterVal = ['seqNo', 'className', 'courseName', 'seqNo', 'date', 'timeRange', 'statusTxt']
            const schedules = this.formatJson(filterVal, res.data.list)
            excel.export_json_to_excel({
              header: tHeader,
              data: schedules,
              filename: row.name + ' 月份课表'
            })
          })
        } else {
          this.$message({
            showClose: false,
            message: '导出老师课表失败!'
          });
        }
      })
      this.downloadLoading = false      
    },
    // 数据转换
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'date') {
          return parseDate(v[j], 'yyyy-MM-dd')
        } else {
          return v[j]
        }
      }))
    },
    itemRender(item) {
      const h = this.$createElement
      return h('span', {
        on: {
          click: () => {
            this.startChangeschedule(item.scheduleId)
          }
        }
      }, item.timeRange + ' ' + item.courseName)
    },
    selsChange: function(sels) {
      this.sels = sels
    },
    exportSchedule() {
      console.log('还未实现')
    },
    startChangeschedule(scheduleId) {
      this.scheduleId = scheduleId
      this.$refs.changeScheduleDlg.showscheduleChange = true
    },
    scheduleChanged(payload) {
      console.log('接收到调课成功事件！')
    },
    changeDate(event, dragItem, toDate) {
      const para = {
        scheduleId: dragItem.scheduleId,
        target: toDate
      }
      changeScheduleReq(para).then(res => {
        // 成功回调
      })
    }
  }
  // 11.Rendering ( template/render/renderError )
}
</script>

<style lang="scss" scoped>
  // @import 'fullcalendar/dist/fullcalendar.css';
</style>
